<template>
	<div>
		<el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible">
		<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
			<el-form-item label="会员昵称" prop="memberNick"><el-input v-model="dataForm.memberNick" placeholder="会员昵称"></el-input></el-form-item>
			<el-form-item label="会员类型" prop="memberTypeId">
				<el-select v-model="dataForm.memberTypeId">
					<el-option v-for="item in memberTypeList" :label="item.memberTypeName" :key="item.id" :value="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="身份证号" prop="idCard"><el-input v-model="dataForm.idCard" placeholder="身份证号"></el-input></el-form-item>
			<el-form-item label="会员姓名" prop="memberName"><el-input v-model="dataForm.memberName" placeholder="会员姓名"></el-input></el-form-item>
			<el-form-item label="性别" prop="sex">
				<el-radio v-model="dataForm.sex" label="1">男</el-radio>
				<el-radio v-model="dataForm.sex" label="2">女</el-radio>
			</el-form-item>
			<el-form-item label="家庭住址" prop="address"><el-input v-model="dataForm.address" placeholder="家庭住址"></el-input></el-form-item>
			<el-form-item label="会员电话" prop="tel"><el-input v-model="dataForm.tel" placeholder="会员电话"></el-input></el-form-item>
			<el-form-item label="生日" prop="birthday"><el-date-picker v-model="dataForm.birthday" type="date" placeholder="选择日期"></el-date-picker></el-form-item>
			<el-form-item label="长期有效" prop="longTermStatus">
				<el-radio v-model="dataForm.longTermStatus" label="1"  @change="longTerm">是</el-radio>
				<el-radio v-model="dataForm.longTermStatus" label="2" @change="notLongTerm">否</el-radio>
			</el-form-item>
			<el-form-item v-show="notLongTermVisile" label="有效期" prop="termOfValidity">
				<el-date-picker v-model="dataForm.termOfValidity" type="date" placeholder="选择日期"></el-date-picker>
			</el-form-item>
			<el-form-item label="销售人员" prop="salesmanList">
				<el-button  icon="el-icon-plus" type="primary" @click="getSalesman" size="small">选择销售人员</el-button>{{showStaff}}
				<!-- <el-input @focus="getSalesman" v-model="dataForm.salemanList" placeholder="销售人员">

				</el-input> -->
			</el-form-item>
			<el-form-item label="卡状态" prop="status">
				<el-radio v-model="dataForm.status" label="1">正常</el-radio>
				<el-radio v-model="dataForm.status" label="2">冻结</el-radio>
				<el-radio v-model="dataForm.status" label="3" >退卡</el-radio>
			</el-input>
			</el-form-item>
			<el-form-item label="备注" prop="remark"><el-input v-model="dataForm.remark" placeholder="备注"></el-input></el-form-item>
		</el-form>
		<span slot="footer" class="dialog-footer">
			<el-button @click="visible = false">取消</el-button>
			<el-button type="primary" @click="dataFormSubmit()" :disabled="disabledSubmit">确定</el-button>
		</span>
	</el-dialog>

	<el-dialog center title="选择销售人员" :visible.sync="salemanVisile" width="65%" append-to-body>
		<el-row :gutter="20">
			<el-col :span="8">
				<div>
					员工提成类型
				</div>
				<br>
				 <el-radio-group  v-model="dataForm.commissionTypeId" size="small">
					 <el-row :gutter="20">
					 	<el-col :span="12" v-for="c in commissionList" :key="c.id">
							<el-card>
								<el-radio :label="c.id" border>{{c.commissionTypeName}}</el-radio>
							</el-card>
					 		<br><br><br>
					 	</el-col>
					 </el-row>
				 </el-radio-group>
			</el-col>
			<el-col :span="16">
				<div>
					员工列表
				</div>
				<br>
				<el-checkbox-group v-model="dataForm.salemanList">
					<el-row :gutter="20">
						<el-col :span="8" v-for="sale in salemanList" :key="sale.staffId">
							<el-card  >
								<el-checkbox   :label="sale.staffId">
									<div>姓名:{{sale.staffName}}</div>
									<div>电话:{{sale.staffTel}}</div>
									<div>性别:{{sale.staffSex === 1?'男':'女'}}</div>
								</el-checkbox>
							</el-card>
							<br>
						</el-col>
					</el-row>
				</el-checkbox-group>
			</el-col>
		</el-row>

		<span slot="footer" class="dialog-footer">
			<el-button @click="salemanVisile = false">取消</el-button>
			<el-button type="primary" @click="getSaleMans()">确定</el-button>
		</span>
	</el-dialog>
	</div>

</template>

<script>
import {isMobile} from "../../../../utils/validate";

export default {
  data () {
    var validateMobile = (rule, value, callback) => {
      if (!isMobile(value)) {
        callback(new Error('手机号格式错误'))
      } else {
        callback()
      }
    };
    var validateAge = (rule, value, callback) => {
      if (isNaN(value)) {
        callback(new Error('只能为数字'))
      } else {
        callback()
      }
    }
    return {
	  salemanVisile:false,
	  notLongTermVisile:false,
	  memberTypeList:[],
	  salemanList:[],
	  commissionList:[],
      visible: false,
      dataForm: {
        id: 0,
        memberNick: '',
        memberCardNo: '',
        memberTypeId: '',
        registerTime: '',
        revokeTime: '',
        idCard: '',
        memberName: '',
        sex: '1',
        address: '',
        tel: '',
        birthday: '',
        termOfValidity: '',
        longTermStatus: '1',
        loginPwd: '',
        payPwd: '',
        applyMode: '',
        status: '1',
        sellerId: '',
        memberImg: '',
        createUserId: '',
        createTime: '',
        remark: '',
		salemanList:[],
		commissionTypeId:''
      },
      dataRule: {
        memberNick: [
          { required: true, message: '会员昵称不能为空', trigger: 'blur' }
        ],
        memberCardNo: [
          { required: true, message: '会员卡号不能为空', trigger: 'blur' }
        ],
        memberTypeId: [
          { required: true, message: '会员类型不能为空', trigger: 'blur' }
        ],
        registerTime: [
          { required: true, message: '办卡日期不能为空', trigger: 'blur' }
        ],
        revokeTime: [
          { required: true, message: '退卡日期不能为空', trigger: 'blur' }
        ],
        idCard: [
          { required: true, message: '身份证号不能为空', trigger: 'blur' },
          { validator: validateAge, trigger: 'blur' }
        ],
        memberName: [
          { required: true, message: '会员姓名不能为空', trigger: 'blur' }
        ],
        sex: [
          { required: true, message: '性别(1男2女)不能为空', trigger: 'blur' }
        ],

        tel: [
          { required: true, message: '会员电话不能为空', trigger: 'blur' },
          { validator: validateMobile, trigger: 'blur' }
        ],
        birthday: [
          { required: true, message: '生日不能为空', trigger: 'blur' }
        ],

        longTermStatus: [
          { required: true, message: '长期有效(1是2否)不能为空', trigger: 'blur' }
        ],
        loginPwd: [
          { required: true, message: '登录密码不能为空', trigger: 'blur' }
        ],
        payPwd: [
          { required: true, message: '支付密码不能为空', trigger: 'blur' }
        ],
        applyMode: [
          { required: true, message: '办卡方式(线上线下)不能为空', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '卡状态(1正常2冻结3退卡)不能为空', trigger: 'blur' }
        ],
        sellerId: [
          { required: true, message: '所属商家不能为空', trigger: 'blur' }
        ],
        memberImg: [
          { required: true, message: '会员头像不能为空', trigger: 'blur' }
        ],
        createUserId: [
          { required: true, message: '创建人不能为空', trigger: 'blur' }
        ],
        createTime: [
          { required: true, message: '创建时间不能为空', trigger: 'blur' }
        ],
        // remark: [
        //   { required: true, message: '备注不能为空', trigger: 'blur' }
        // ]
      },
	  showStaff:[],
    }
  },
  methods: {
		//非长期有效
		notLongTerm(){
			this.notLongTermVisile = true
		},
		longTerm(){
			this.notLongTermVisile = false
		},

		getSaleMans(){
				var arr = []
				this.dataForm.salemanList.forEach(item => {
					this.salemanList.forEach(items => {
						if(item === items.staffId){
							arr.push(items.staffName)
						}
					})
				})
				this.showStaff = arr
				this.salemanVisile = false
		},

		//销售人员列表
		getSalesman(){
			this.$http({
			  url: this.$http.adornUrl('/store/tstorestaff/list'),
			  method: 'get',
			  params: this.$http.adornParams({
			    status: 1,
          key:''
			  })
			}).then(({data}) => {
			  if (data && data.code === 0) {
			    this.salemanList = data.page.list
			  } else {
			    this.salemanList = []
			  }
			})

			//获取提成类型列表
			this.$http({
			  url: this.$http.adornUrl('/member/tstorestaffcommissiontype/list'),
			  method: 'get',
			}).then(({data}) => {
			  if (data && data.code === 0) {
			    this.commissionList = data.page.list
			  } else {
			    this.commissionList = []
			  }
			})
			this.salemanVisile = true
		},
    init (id) {
		//会员类型列表
		this.$http({
			url: this.$http.adornUrl('/store/tstoremembertype/list'),
			method: 'get',
			params: this.$http.adornParams({
				'status':1
			})
		}).then(({ data }) => {
			if (data && data.code === 0) {
				this.memberTypeList = data.page.list;
			} else {
				this.memberTypeList = [];
			}
		});

      this.dataForm.id = id || 0
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        if (this.dataForm.id) {
          this.$http({
            url: this.$http.adornUrl(`/store/tstoremember/info/${this.dataForm.id}`),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.dataForm.memberNick = data.tStoreMember.memberNick
              this.dataForm.memberCardNo = data.tStoreMember.memberCardNo
              this.dataForm.memberTypeId = data.tStoreMember.memberTypeId
              this.dataForm.registerTime = data.tStoreMember.registerTime
              this.dataForm.revokeTime = data.tStoreMember.revokeTime
              this.dataForm.idCard = data.tStoreMember.idCard
              this.dataForm.memberName = data.tStoreMember.memberName
              this.dataForm.sex = data.tStoreMember.sex.toString()
              this.dataForm.address = data.tStoreMember.address
              this.dataForm.tel = data.tStoreMember.tel
              this.dataForm.birthday = data.tStoreMember.birthday
              this.dataForm.termOfValidity = data.tStoreMember.termOfValidity
              this.dataForm.longTermStatus = data.tStoreMember.longTermStatus.toString()
              this.dataForm.loginPwd = data.tStoreMember.loginPwd
              this.dataForm.payPwd = data.tStoreMember.payPwd
              this.dataForm.applyMode = data.tStoreMember.applyMode
              this.dataForm.status = data.tStoreMember.status.toString()
              this.dataForm.sellerId = data.tStoreMember.sellerId
              this.dataForm.memberImg = data.tStoreMember.memberImg
              this.dataForm.createUserId = data.tStoreMember.createUserId
              this.dataForm.createTime = data.tStoreMember.createTime
              this.dataForm.remark = data.tStoreMember.remark
            }
          })
        }
      })
    },
    // 表单提交
    dataFormSubmit () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/store/tstoremember/${!this.dataForm.id ? 'save' : 'update'}`),
            method: 'post',
            data: this.$http.adornData({
              'id': this.dataForm.id || undefined,
              'memberNick': this.dataForm.memberNick,
              'memberCardNo': this.dataForm.memberCardNo,
              'memberTypeId': this.dataForm.memberTypeId,
              'registerTime': this.dataForm.registerTime,
              'revokeTime': this.dataForm.revokeTime,
              'idCard': this.dataForm.idCard,
              'memberName': this.dataForm.memberName,
              'sex': this.dataForm.sex,
              'address': this.dataForm.address,
              'tel': this.dataForm.tel,
              'birthday': this.dataForm.birthday,
              'termOfValidity': this.dataForm.termOfValidity,
              'longTermStatus': this.dataForm.longTermStatus,
              'loginPwd': this.dataForm.loginPwd,
              'payPwd': this.dataForm.payPwd,
              'applyMode': this.dataForm.applyMode,
              'status': this.dataForm.status,
              'sellerId': this.dataForm.sellerId,
              'memberImg': this.dataForm.memberImg,
              'createUserId': this.dataForm.createUserId,
              'createTime': this.dataForm.createTime,
              'remark': this.dataForm.remark,
			  'commissionTypeId':this.dataForm.commissionTypeId,
			  'salemanList':this.dataForm.salemanList
            })
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.$emit('refreshDataList')
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    }
  }
}
</script>
